//编辑区域
var divEditor = document.createElement('div')
//内容显示
var divShow = document.createElement('div')

//创建输入框
var input = document.createElement('textarea')
input.cols = 30//设置列
input.rows = 10//设置行
//创建按钮
var btns = document.createElement('button')
btns.innerText = '按钮'
var btn = document.createElement('button')
btn.innerText = '确定'
btn.onclick = function(){
    //点击按钮之后获取输入框内容  trim()去除开始和结尾的空格
    var strTxt = input.value.trim()
    if(strTxt==''){
        alert('输入内容不能为空')
    }
    else{
        var h5 = document.createElement('h5')//创建标签
        h5.innerText = strTxt//标签文本内容
        divShow.appendChild(h5)    
        input.value = ''//清空输入框的内容
    }
}
btns.onclick = function(){
    //点击按钮之后获取输入框内容  trim()去除开始和结尾的空格
    var strHtml = input.value.trim()
    if(strHtml==''){
        alert('输入内容不能为空')
    }
    else{
        var h5 = document.createElement('h5')//创建标签
        h5.innerHTML = strHtml//标签文本内容
        divShow.appendChild(h5)
        // input.value = ''//清空输入框的内容
    }
}

//把标签插入页面  appendChild在标签内部加入子节点，子节点出现在最后面
document.body.appendChild(divEditor)//编辑区域容器
document.body.appendChild(divShow)//显示区域容器

divEditor.appendChild(input)
divEditor.appendChild(btn)
divEditor.appendChild(btns)